<template>
	<div class="data-component">
		<view-title :title="title"></view-title>
		<div class="show_list flex">
			<div class="tabel" v-for="(item, index) in list" :key="index">
				<p>{{ item.title }}</p>
				<p>{{ item.value }}</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "data-total",

	props: {
		title: {
			type: String,
			default: "",
		},
		list: {
			type: Array | null,
			default: () => [],
		},
	},
};
</script>

<style lang="less" scoped>
// 累计数据样式
.data-component {
	padding: 10px 0;
	margin-bottom: 20px;
	background: #fff;

	.show_list {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		align-content: flex-start;
		flex-direction: row;

		.tabel {
			width: 200px;
			padding: 20px;
			box-shadow: 0 0 5px #ccc;
			text-align: center;
			margin: 10px 20px;

			p {
				color: #666666;
				font-size: 18px;
				line-height: 30px;
			}
			p:last-child {
				color: #333333;
				font-size: 36px;
			}
		}
	}
}
// flex布局
.flex {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
</style>
